<script setup>
import { ref, onMounted, reactive, onUnmounted } from 'vue'
import {
    getVideoDevice,
    getQueryArgs,
    getDockerStart,
    getDockerStop,
    deleteStop,
    // getCheckmodelFile,
} from '@/assets/api/device'
import applicationList from '@/components/video/analysis/applicationList.vue'
import applicationNew from '@/components/video/analysis/applicationNew.vue'
import { showMsg, showConfirm } from '@/assets/js/utils'
import { useUserStore } from '@/stores/index'
// import config from '@/assets/js/config'
// const { protocol } = window.location
const userStore = useUserStore()
const defaultProps = {
    children: 'children',
    label: 'name',
}
const data = ref([])
const tableTabsValue = ref('0')
const tableData = ref([])
const visible = ref(false)
const visibleTitle = ref()
const visibleNew = ref(false)
const visibleNewTitle = ref()
const videoName = ref()
const visibleNewData = ref()
const videoItem = ref()
// const fileStatus = ref(true)
// 规则列表状态
const ruleState = new Map([
    ['Active', '正在运行（定时）'],
    ['Active_M', '正在运行'],
    ['Inactive', '未运行（定时）'],
    ['Inactive_M', '未运行'],
    ['Null', '未激活'],
])
// 规则列表样式
const ruleStateStyle = new Map([
    ['Active', 'color:#092EE7'],
    ['Active_M', 'color:#092EE7'],
    ['Inactive', 'color:#E50012'],
    ['Inactive_M', 'color:#E50012'],
    ['Null', 'color:#88898d'],
])
const state = reactive({
    //定时器
    timeInter: null,
})
function getData() {
    getVideoDevice().then((res) => {
        data.value = [
            {
                name: '通道列表',
                children: res.data,
            },
        ]
        videoName.value = data.value[0].children[0].number
        videoItem.value = data.value[0].children[0]
        getList()
    })
}
function getList() {
    getQueryArgs({
        device_number: videoName.value,
        license_information: userStore.systemInfo.gatewayPermit,
    }).then((res) => {
        tableData.value = res.data
    })
}
getData()

function addApplication() {
    visible.value = true
    visibleTitle.value = '应用规则选择'
}
function editApplication(item) {
    if (item.status == 'Active_M') {
        showMsg('请先停止运行', 'error')
        return
    }
    visibleNew.value = true
    visibleNewTitle.value = '编辑应用规则'
    visibleNewData.value = { ...item, ...videoItem.value }
}
function handleNodeClick(data, node) {
    if (node.isLeaf) {
        videoName.value = data.number
        videoItem.value = data
        getList()
    }
}
// 开启/停止
async function changeServer(item, type) {
    let params = {
        uuid: item.uuid,
        license_information: userStore.systemInfo.gatewayPermit,
    }
    if (type == 'start') {
        // getCheckmodelFile({
        //     model_path: item.load_model_path,
        //     model_name: item.load_model_name,
        //     docker_port: item.docker_port,
        //     ip_addr: `${protocol}//${config.IPUrl}`,
        // }).then((res) => {
        // if (res.data !== 'yes') {
        // fileStatus.value = false
        getDockerStart(params).then(() => {
            showMsg('操作成功')
            getList()
        })
        //     }
        // })
    } else {
        getDockerStop(params).then(() => {
            showMsg('操作成功')
            getList()
        })
    }
}
// function starServer(id) {
//     getDockerStart({
//         uuid: id,
//         license_information: userStore.systemInfo.gatewayPermit,
//     }).then(() => {
//         showMsg('操作成功')
//         getList()
//     })
// }
// // 停止
// function stopServer(id) {
//     getDockerStop({
//         uuid: id,
//         license_information: userStore.systemInfo.gatewayPermit,
//     }).then(() => {
//         showMsg('操作成功')
//         getList()
//     })
// }
// 删除
function delect(item) {
    showConfirm({
        content: '您确定要删除该数据吗',
        onConfirm: () => {
            deleteStop({
                uuid: item.uuid,
                status: item.status,
                license_information: userStore.systemInfo.gatewayPermit,
                algorithm_id: item.algorithm_id,
            }).then(() => {
                showMsg('操作成功')
                getList()
            })
        },
    })
}
onMounted(() => {})
onUnmounted(() => {
    clearInterval(state.timeInter) //销毁
    state.timeInter = null
})
</script>
<template>
    <!-- @node-click="handleNodeClick" -->
    <div class="white-box d-flex-1 d-flex d-flex-top">
        <div class="device-tree">
            <el-tree
                :data="data"
                :props="defaultProps"
                @node-click="handleNodeClick"
                :default-expand-all="true"
            >
                <template #default="{ data }">
                    <p
                        class="device-node"
                        :class="{
                            active: videoName == data.number,
                        }"
                    >
                        {{ data.name }}
                    </p>
                </template>
            </el-tree>
        </div>
        <div class="d-flex-1" style="height: 100%">
            <el-tabs v-model="tableTabsValue" type="border-card">
                <!-- <el-tab-pane value="0" label="基本信息">
                    <el-form
                        :model="form"
                        label-position="right"
                        label-width="100px"
                    >
                        <el-row class="row-bg" justify="space-evenly">
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple">
                                    <el-form-item label="系统通道号:">
                                        <el-input v-model="form.name" />
                                    </el-form-item></div
                            ></el-col>
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple-light">
                                    <el-form-item label="通道名称:">
                                        <el-input />
                                    </el-form-item></div
                            ></el-col>
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple">
                                    <el-form-item label="设备类型:">
                                        <el-select>
                                            <el-option label="1" value="1" />
                                            <el-option label="1" value="1" />
                                        </el-select>
                                    </el-form-item></div
                            ></el-col>
                        </el-row>
                        <el-row class="row-bg" justify="space-evenly">
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple">
                                    <el-form-item label="IP地址:">
                                        <el-input />
                                    </el-form-item></div
                            ></el-col>
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple-light">
                                    <el-form-item label="端口:">
                                        <el-input-number
                                            :min="1"
                                            :max="10"
                                            controls-position="right"
                                        />
                                    </el-form-item></div
                            ></el-col>
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple">
                                    <el-form-item label="码流类型:">
                                        <el-select>
                                            <el-option label="1" value="1" />
                                            <el-option label="1" value="1" />
                                        </el-select>
                                    </el-form-item></div
                            ></el-col>
                        </el-row>
                        <el-row class="row-bg" justify="space-evenly">
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple">
                                    <el-form-item label="用户名:">
                                        <el-input />
                                    </el-form-item></div
                            ></el-col>
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple-light">
                                    <el-form-item label="密码:">
                                        <el-input />
                                    </el-form-item></div
                            ></el-col>
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple">
                                    <el-form-item label="设备通道:">
                                        <el-input-number
                                            :min="1"
                                            :max="10"
                                            controls-position="right"
                                        />
                                    </el-form-item></div
                            ></el-col>
                        </el-row>
                        <el-row class="row-bg" justify="space-evenly">
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple">
                                    <el-form-item label="图像翻转:">
                                        <el-select>
                                            <el-option label="1" value="1" />
                                            <el-option label="1" value="1" />
                                        </el-select>
                                    </el-form-item></div
                            ></el-col>
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple-light">
                                    <el-form-item label="连线模式:">
                                        <el-select>
                                            <el-option label="1" value="1" />
                                            <el-option label="1" value="1" />
                                        </el-select>
                                    </el-form-item></div
                            ></el-col>
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple">
                                    <el-form-item label="最低评分:">
                                        <el-input-number
                                            :min="1"
                                            :max="10"
                                            controls-position="right"
                                        />
                                    </el-form-item></div
                            ></el-col>
                        </el-row>
                        <el-row class="row-bg" justify="space-evenly">
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple">
                                    <el-form-item label="编解码器:">
                                        <el-select>
                                            <el-option label="1" value="1" />
                                            <el-option label="1" value="1" />
                                        </el-select>
                                    </el-form-item></div
                            ></el-col>
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple-light">
                                    <el-form-item label="解码延时:">
                                        <el-input-number
                                            :min="1"
                                            :max="10"
                                            controls-position="right"
                                        />
                                    </el-form-item></div
                            ></el-col>
                            <el-col :span="6"
                                ><div class="grid-content ep-bg-purple">
                                    <el-form-item label="最小宽度:">
                                        <el-input-number
                                            :min="1"
                                            :max="10"
                                            controls-position="right"
                                        />
                                    </el-form-item></div
                            ></el-col>
                        </el-row>
                        <el-row class="row-bg" justify="space-evenly">
                            <el-col :span="21">
                                <el-form-item label="设备地址:">
                                    <el-input />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="row-bg" justify="space-evenly">
                            <el-col :span="21">
                                <el-form-item label="抓拍流地址:">
                                    <el-input />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="row-bg" justify="space-evenly">
                            <el-col :span="21">
                                <el-form-item label="摄像机编码:">
                                    <el-input />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item class="d-flex-bottom">
                            <el-button type="primary" @click="onSubmit"
                                >保存</el-button
                            >
                            <el-button>重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane> -->
                <el-tab-pane value="1" label="算法规则">
                    <el-button type="primary" @click="addApplication"
                        >新建任务</el-button
                    >
                    <el-table :data="tableData" class="mt-20" width="100%">
                        <el-table-column
                            type="index"
                            label="任务序号"
                            width="250"
                        />
                        <el-table-column prop="custom_name" label="任务名称" />
                        <!-- <el-table-column
                            prop="address"
                            label="规则类型"
                            width="150"
                        />
                        <el-table-column
                            prop="address"
                            label="联动启动"
                            width="150"
                        /> -->
                        <el-table-column
                            label="状态"
                            align="center"
                            width="250"
                        >
                            <template #default="scope">
                                <span
                                    class="icon"
                                    :style="[
                                        ruleStateStyle.get(scope.row.status),
                                    ]"
                                    >&#xe608;</span
                                >
                                {{ ruleState.get(scope.row.status) }}
                                <!-- <span
                                    class="ml-5"
                                    v-if="scope.row.countdown < 10"
                                    >({{ scope.row.countdown }})</span
                                > -->
                            </template>
                        </el-table-column>

                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-tooltip
                                    effect="dark"
                                    content="启动"
                                    placement="top"
                                >
                                    <el-button
                                        type="primary"
                                        link
                                        @click="
                                            changeServer(scope.row, 'start')
                                        "
                                        v-if="scope.row.status == 'Inactive_M'"
                                    >
                                        <el-icon size="16"
                                            ><CircleCheckFilled
                                        /></el-icon>
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip
                                    effect="dark"
                                    content="关闭"
                                    placement="top"
                                >
                                    <el-button
                                        v-if="scope.row.status == 'Active_M'"
                                        type="danger"
                                        link
                                        @click="changeServer(scope.row, 'stop')"
                                    >
                                        <el-icon size="16"
                                            ><CircleCloseFilled
                                        /></el-icon>
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip
                                    effect="dark"
                                    content="编辑"
                                    placement="top"
                                >
                                    <el-button
                                        type="primary"
                                        link
                                        @click="editApplication(scope.row)"
                                    >
                                        <el-icon size="16"><Edit /></el-icon>
                                    </el-button>
                                </el-tooltip>
                                <!-- <el-tooltip
                                    effect="dark"
                                    content="规则音频选择"
                                    placement="top"
                                >
                                    <el-button type="primary" link>
                                        <el-icon size="16"><Headset /></el-icon>
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip
                                    effect="dark"
                                    content="输出设置"
                                    placement="top"
                                >
                                    <el-button type="primary" link>
                                        <el-icon size="16"><Setting /></el-icon>
                                    </el-button>
                                </el-tooltip> -->
                                <el-tooltip
                                    effect="dark"
                                    content="删除"
                                    placement="top"
                                >
                                    <el-button
                                        type="danger"
                                        link
                                        @click="delect(scope.row)"
                                    >
                                        <el-icon size="16"><Delete /></el-icon>
                                    </el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <applicationList
        v-model:ruleVisible="visible"
        v-if="visible"
        :videoItem="videoItem"
        @success="getList"
    ></applicationList>

    <applicationNew
        :visibleNewData="visibleNewData"
        v-model:visible="visibleNew"
        v-if="visibleNew"
        :visibleTitle="visibleNewTitle"
        @success="getList"
    ></applicationNew>
</template>
<style lang="scss" scoped>
:deep(.d-flex-bottom) {
    .el-form-item__content {
        justify-content: end;
    }
}
:deep(.el-tabs--border-card) {
    height: 100% !important;
    .el-tabs__content {
        margin-top: 32px;
    }
}
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.device-tree {
    width: 300px;
    border: 1px solid #eee;
    padding: 20px;
    margin-right: 20px;
    height: 100%;
    .device-node {
        &.active {
            color: var(--el-color-primary);
            font-weight: bold;
        }
    }
}
.screen-video {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    height: calc(100vh - 250px);
    margin-top: 20px;
    background: #000;
    &.fullscreen {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 12;
        height: 100%;
        width: 100%;
        margin-top: 0;
        .exit-fullscreen {
            display: block;
        }
    }
    .exit-fullscreen {
        display: none;
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 12;
    }
    .video-item {
        position: relative;
        width: 100%;
        height: 100%;
        color: #fff;
        .video-btn {
            position: absolute;
            right: 0;
            z-index: 9999;
        }
    }
    &.four {
        .video-item {
            width: 50%;
            height: 50%;
            border-bottom: 1px solid rgba(#fff, 0.2);
            border-right: 1px solid rgba(#fff, 0.2);
            &:nth-child(2n) {
                border-right: none;
            }
        }
    }
    &.nine {
        .video-item {
            width: 33.33%;
            height: 33.33%;
            border-bottom: 1px solid rgba(#fff, 0.2);
            border-right: 1px solid rgba(#fff, 0.2);
            &:nth-child(3n) {
                border-right: none;
            }
        }
    }
}
</style>
